<template>
  <div class='deviceSafeRisk'></div>
</template>

<script>
import {getDistributionOfDepartment, getDistributionOfHospital} from "@/api/patient";

export default {
  name: 'deviceSafeRisk',
  data() {
    return {
      myChart: null,
      chartData: {
        proportion: [],
        ranking: []
      },
      barNameList: [],
      barValueList: [],
      pieNameList: [],
      pieValueList: [],

      rankNumber: [],

    }
  },
  methods: {
    getData() {
      getDistributionOfHospital().then(res => {
        this.chartData = res.data
        this.chartData.proportion.forEach(e => {
          this.pieNameList.push(e.name)
          this.pieValueList.push(e.value)
        })

        this.chartData.ranking.forEach(e => {
          this.barNameList.push(e.name)
          this.barValueList.push(e.value)
        })


        this.barNameList.forEach((item, index) => {
          this.rankNumber.push(index + 1 + item)
        })
        this.setDeviceSafe()
      })
    },
    // 设备安全性风险
    setDeviceSafe() {
      let option = {
        title: [
          {
            text: '挂号医院排行',
            textStyle: {
              color: "#fff",
              fontSize: 12
            },
            top: '4%',
            left: '4%'
          },
          {
            text: "挂号医院比例",
            textStyle: {
              color: "#fff",
              fontSize: 12
            },
            top: '4%',
            left: '55%'
          },
        ],
        tooltip:
            {
              trigger: 'axis',
              axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              },
            },
        grid: {
          top: '15%',
          left: '3%',
          right: '50%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {show: false},
          axisTick: {show: false},
          splitLine: {show: false},
          axisLine: {show: false}
        },
        yAxis: {
          type: 'category',
          axisTick: {show: false},
          splitLine: {show: false},
          axisLine: {show: false},
          axisLabel: {
            color: '#fff',
            backgroundColor: '#A34FFA',
            borderRadius: 3,
            margin: 0,
            padding: [1, 3, 1, 3],
            formatter: function(value) {
              // 使用正则表达式匹配数字部分
              var match = value.match(/\d+/);
              return match ? match[0] : value;
            }
          },
          inverse: true,
          data: this.rankNumber             //['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
        },
        angleAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#172E6E'
            }
          },
          startAngle: 135,
          axisLabel: {
            color: '#04E8EB',
            fontSize: 10
          },
          axisTick: {show: false},
          data: this.pieNameList,
          z: 10
        },
        radiusAxis: {
          splitLine: {
            lineStyle: {
              color: '#172E6E'
            }
          },
          axisTick: {show: false},
          axisLabel: {show: false},
          axisLine: {
            show: false
          }
        },
        polar: {
          center: ['72%', '55%'],
          radius: "65%",
        },
        series: [
          {
            name: '人数',
            type: 'bar',
            stack: '总人数',
            barWidth: 8,
            itemStyle: {
              color: '#9D50EC',
              borderRadius: [0, 8, 8, 0]
            },
            label: {
              show: false,

              position: 'insideRight'
            },
            data: this.barValueList
          },

          {
            type: 'bar',
            data: this.pieValueList,
            coordinateSystem: 'polar',
            name: '人数',
            itemStyle: {
              color: { // 颜色线性渐变
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [{
                  offset: 0, color: '#fab2ff' // 0% 处的颜色
                }, {
                  offset: 1, color: '#1904e5' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            },
            stack: 'a'
          }

        ]
      };
      if (!this.myChart) this.myChart = this.$echarts(this.$el);

      this.myChart.clear();
      this.myChart.resize()
      this.myChart.setOption(option);
    },
  },
  mounted() {
    this.getData()
    // this.setDeviceSafe();
  },
}
</script>

<style lang="less" scoped>
.deviceSafeRisk {
  height: 100%;
}
</style>
